﻿<UserControl x:Class="Bewise.Phone.ExpanderControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480"
             x:Name="ThisExpanderControl">
    <UserControl.Resources>
        <ControlTemplate x:Key="ToggleButtonControlTemplate" TargetType="ToggleButton">
            <Grid Background="Transparent" Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0" To="Unchecked">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseIn"/>
                                </VisualTransition.GeneratedEasingFunction>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.3" To="-90" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualTransition>
                            <VisualTransition GeneratedDuration="0:0:0.3" To="Checked">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseIn"/>
                                </VisualTransition.GeneratedEasingFunction>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                        
                        <VisualState x:Name="Indeterminate"/>
                        <VisualState x:Name="Checked"/>
                        <VisualState x:Name="Unchecked">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="-90" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border HorizontalAlignment="Stretch" Background="Transparent" Height="70">
                    <Path x:Name="arrow" Stretch="Fill" StrokeThickness="3.3" StrokeLineJoin="Round" Stroke="{StaticResource PhoneAccentBrush}" Data="F1 M 47.3317,349.561L 42.0287,354.864L 37.4613,349.535" Height="13" UseLayoutRounding="False" VerticalAlignment="Center" HorizontalAlignment="Center" Width="20" Margin="0,15,0,5" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <CompositeTransform/>
                        </Path.RenderTransform>
                    </Path>
                </Border>
                <ContentControl x:Name="contentControl" Grid.Column="1" VerticalAlignment="Center" Content="{TemplateBinding Content}" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5, 0, 0, 0" />
            </Grid>
        </ControlTemplate>


        <Storyboard x:Key="ToExpanded">

            <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(CompositeTransform.ScaleY)" 
                                                 Storyboard.TargetName="ContentP" >
                <DoubleAnimation.EasingFunction>
                    <BackEase Amplitude="0" EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentP" BeginTime="0:0:0.0">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

        </Storyboard>
        <Storyboard x:Key="ToUnexpanded">

           

            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(CompositeTransform.ScaleY)" 
                                                 Storyboard.TargetName="ContentP" >
                <DoubleAnimation.EasingFunction>
                    <BackEase Amplitude="0" EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentP" BeginTime="0:0:0.4">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"  >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.Resources>


        </Grid.Resources>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup"/>
        </VisualStateManager.VisualStateGroups>
        <ToggleButton x:Name="ToggleB" Grid.Row="0" Content="{Binding HeaderText, ElementName=ThisExpanderControl}" Template="{StaticResource ToggleButtonControlTemplate}" IsChecked="{Binding ElementName=ThisExpanderControl, Path=IsExpanded, Mode=TwoWay}"></ToggleButton>

        <ContentPresenter   x:Name="ContentP" Visibility="Visible"
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            Grid.Row="1"  Content="{Binding ElementName=ThisExpanderControl, Path=ContentArea}" 
                            RenderTransformOrigin="0.5,0" >
            <ContentPresenter.RenderTransform>
                <CompositeTransform ScaleY="1"/>
            </ContentPresenter.RenderTransform>
        </ContentPresenter>
    </Grid>
</UserControl>
